<template>
  <div>
    <div style="text-align: right; margin-bottom: 10px">
      <el-input
        class="seleinput"
        size="mini"
        v-model="queryParams.chaxun1.vale"
        :placeholder="queryParams.chaxun1.plaholer"
      ></el-input>
      <el-select
        size="mini"
        class="u-m-l-10"
        v-model="queryParams.chaxun2.vale"
        filterable
        clearable
        :placeholder="queryParams.chaxun2.plaholer"
      >
        <el-option
          v-for="item in queryParams.chaxun2.Optiopns"
          :key="item.ID"
          :label="item.Name"
          :value="item.ID"
        >
        </el-option>
      </el-select>
      <el-select
        size="mini"
        class="u-m-l-10"
        v-model="queryParams.chaxun3.vale"
        filterable
        clearable
        :placeholder="queryParams.chaxun3.plaholer"
      >
        <el-option
          v-for="item in queryParams.chaxun3.Optiopns"
          :key="item.ID"
          :label="item.Name"
          :value="item.ID"
        >
        </el-option>
      </el-select>

      <el-button class="u-m-l-10" type="primary" size="mini">查询</el-button>

      <el-popover placement="bottom" class="u-m-l-10" trigger="click">
        <el-button slot="reference" type="primary" size="mini"
          >更多查询</el-button
        >
        <div class="cpopover">
          <el-select
            size="mini"
            class="seleinput"
            v-model="queryParams.chaxun4.vale"
            filterable
            clearable
            :placeholder="queryParams.chaxun4.plaholer"
          >
            <el-option
              v-for="item in queryParams.chaxun4.Optiopns"
              :key="item.ID"
              :label="item.Name"
              :value="item.ID"
            >
            </el-option>
          </el-select>
          <p>
            <el-button
              class="u-m-l-10"
              type="primary"
              size="mini"
              @click="confirm"
              >确定</el-button
            >
            <el-button
              class="u-m-l-10"
              type="primary"
              size="mini"
              @click="reset"
              >重置</el-button
            >
          </p>
        </div>
      </el-popover>

      <slot> </slot>
    </div>
    <div style="display: flex; flex-wrap: wrap">
      <p
        class="chaxunspan"
        v-for="(item, index) in palestine"
        :key="item.plaholer"
      >
        <span>{{ item.plaholer }}:{{ item.vale }}</span
        ><i
          class="el-icon-circle-close chaxunspan_icn"
          @click="DeletItem(item, index)"
        ></i>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      palestine: [],
      queryParams: {
        chaxun1: {
          vale: "",
          plaholer: "费用类别",
        },
        chaxun2: {
          vale: "",
          plaholer: "支付方式",
          Optiopns: [
            {
              ID: "1",
              Name: "现金",
            },
            {
              ID: "2",
              Name: "记账",
            },
          ],
        },
        chaxun3: {
          vale: "",
          plaholer: "费用归属",
          Optiopns: [
            {
              ID: "1",
              Name: "维修",
            },
            {
              ID: "2",
              Name: "人工成本",
            },
          ],
        },
        chaxun4: {
          vale: "",
          plaholer: "审批分类",
          istitle: true,
          Optiopns: [
            {
              ID: "1",
              Name: "维修类",
            },
            {
              ID: "2",
              Name: "记运营类",
            },
          ],
        },
      },
    };
  },
  methods: {
    confirm() {
      let yixuanArr = [];
      let queryParams = this.queryParams;
      let funert = (rge) => {
        return rge.Optiopns.find((e) => e.ID === rge.vale).Name;
      };
      Object.keys(queryParams).forEach((key) => {
        if (queryParams[key].istitle && queryParams[key].vale) {
          if (queryParams[key].Optiopns) {
            yixuanArr.push({
              vlaeId: queryParams[key].vale,
              plaholer: queryParams[key].plaholer,
              vale: funert(queryParams[key]),
            });
          } else {
            yixuanArr.push({
              vale: queryParams[key].vale,
              plaholer: queryParams[key].plaholer,
            });
          }
        }
      });
      this.palestine = yixuanArr;
      console.log("打印结果this.queryParams", this.palestine);
    },
    reset() {
      let queryParams = this.queryParams;
      Object.keys(queryParams).forEach((key) => {
        queryParams[key].vale = "";
      });
      this.palestine = [];
      console.log("打印结果this.queryParams", this.queryParams);
    },
    DeletItem(item, index) {
      this.palestine.splice(index, 1);
      let queryParams = this.queryParams;
      Object.keys(queryParams).forEach((key) => {
        if (queryParams[key].plaholer === item.plaholer)
          queryParams[key].vale = "";
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.chaxunspan {
  background-color: rgba(60, 156, 255, 0.24);
  padding: 2px 5px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  margin: 3px 5px;
  &_icn {
    color: rgba(166, 166, 166, 1);
    margin-left: 5px;
  }
}

.seleinput {
  width: 200px !important;
  margin: 3px;
}
.cpopover {
  display: flex;
  flex-direction: column;
  align-items: center;
  p {
    align-self: end;
  }
}
</style>
